<template>
  <van-row>
    <van-row>
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
        <template #title>
          <van-tag type="danger" size="large" v-if="status==0">待处理</van-tag>
          <van-tag type="success" size="large" v-else-if="status==1">已处理</van-tag>
          <van-tag type="primary" size="large" v-else-if="status==2">取消</van-tag>
          <van-tag type="warning" size="large" v-else-if="status==3">忽略</van-tag>
        </template>
        <template #right>
          <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect">
            <template #reference>
              <van-button type="info" round block plain hairline size="small" v-if="status==0">
                操作
              </van-button>
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
      <van-field v-model="title" readonly label="标题" />
      <van-field v-model="description" readonly label="描述" type="textarea" />
      <van-field name="rate" readonly label="等级">
        <template #input>
          <van-rate v-model="level" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" readonly />
        </template>
      </van-field>
      <van-field readonly label="图片">
        <template #input>
          <van-image width="100" height="100" v-for="(item,i) in images" :key="i" :src="item" class="image_style"
            @click="onPreview(item)" />
        </template>
      </van-field>
      <van-field readonly name="endDate" :value="endDate" label="截至日期" />
      <van-field readonly name="createUser" :value="createUser" label="创建人" />
      <van-field v-model="operationUser" v-if="status!=0" readonly label="操作人" />
      <van-field v-model="operationTime" readonly v-if="status!=0" label="操作时间" />
      <van-field v-model="remark" readonly v-if="status!=0" label="备注" type="textarea" />
    </van-row>
    <van-row>
      <van-dialog v-model="isShowDialog" show-cancel-button @confirm="onConfirm">
        <van-field v-model="submitRemark" rows="3" autosize show-word-limit maxlength="120" type="textarea"
          placeholder="请输入备注信息" />
      </van-dialog>
    </van-row>
  </van-row>
</template>

<script>
  import {
    Row,
    Field,
    Button,
    Rate,
    Uploader,
    Image as VanImage,
    ImagePreview,
    NavBar,
    Toast,
    Tag,
    Popover,
    Dialog
  } from 'vant';
  export default {
    name: "detail",
    components: {
      [Dialog.Component.name]: Dialog.Component,
      'van-row': Row,
      'van-field': Field,
      'van-button': Button,
      'van-rate': Rate,
      'van-image': VanImage,
      'van-nav-bar': NavBar,
      'van-tag': Tag,
      'van-popover': Popover,
    },
    data: function () {
      return {
        id: 0,
        createUser: "", //创建人
        title: "", //标题,
        description: "", //描述
        level: 0, //等级
        images: [], //图片集合
        endDate: "", //截至日期
        status: 0, //任务状态
        actions: [],
        showPopover: false, //是否显示气泡弹出层
        operationUser: "", //操作人
        operationTime: "", //操作时间
        isShowDialog: false, //是否显示操作的弹窗
        remark: "", //备注信息
        submitRemark: "", //提交的备注信息
        selectStatus: "", //选中的状态
      }
    },
    methods: {
      //图片预览
      onPreview(url) {
        var images = [url];
        ImagePreview(images);
      },
      //返回
      onClickLeft() {
        // this.$router.replace('/list');
        this.$router.go(-1);
      },
      //加载数据
      async loadData() {
        //获取 任务信息
        var res = await this.$ajax.get(`/api/task/${this.$route.params.id}`);
        if (res.status == 1) {
          Toast.fail(res.msg);
          return;
        }
        var taskInfo = res.data;
        //赋值
        this.id = taskInfo.id;
        this.title = taskInfo.title;
        this.description = taskInfo.description;
        this.images = taskInfo.imgesList;
        this.level = taskInfo.level;
        this.createUser = taskInfo.createUser;
        this.status = taskInfo.status;
        this.operationUser = taskInfo.operationUser;
        this.operationTime = taskInfo.operationTime;
        this.remark = taskInfo.remark;
        this.endDate = this.$moment(taskInfo.endDate).format("YYYY-MM-DD");
        if (taskInfo.status == 0) {
          this.actions = [{
            text: '解决',
            disabled: false
          }, {
            text: '取消',
            disabled: false
          }, {
            text: '忽略',
            disabled: false
          }];
        } else {
          this.actions = [{
            text: '解决',
            disabled: true
          }, {
            text: '取消',
            disabled: true
          }, {
            text: '忽略',
            disabled: true
          }];
        }
      },
      //选择操作
      async onSelect(info) {
        //获取选中的文本
        var val = info.text;
        this.selectStatus = val;
        this.isShowDialog = true;
      },
      //处理弹框确认的消息
      async onConfirm() {
        var res = await this.$ajax.put(`/api/task/${ this.id}`, {
          operationUser: this.$user.getUserName(),
          status: this.selectStatus == '解决' ? 1 : this.selectStatus == '取消' ? 2 : 3,
          remark: this.submitRemark
        });

        if (res.status == 1) {
          Toast.fail(res.msg);
        } else {
          Toast.success('操作成功');
          //重新加载数据
          await this.loadData();
        }
      }
    },
    async mounted() {
      //显示底部栏
      this.$store.commit('updateShowFoot', false)
      await this.loadData();
    }
  }

</script>
<style scoped>
  .image_style {
    margin-left: 5px;
  }

</style>
